<!-- 底部 -->
<template>
  <div class="footer">
    <div class="foot">
      <div class="foot_top">
        <div class="foot_left">
          <div class="logoBottom"><a href="https://www.ansjy.cn/" alt="岸上教育"><img src="../../assets/img/logo.png" alt="岸上教育"></a></div>
          <div class="foot_tip">
            <li>
              <p>岸上早知道</p>
              <p><img src="../../assets/img/ding.png" alt="岸上早知道"></p>
            </li>
            <li>
              <p>岸上教育</p>
              <p><img src="../../assets/img/serve.png" alt="岸上教育"></p>
            </li>
          </div>
        </div>
        <div class="foot_center">
          <div class="foot_map">
            <label for="">公告</label>
            <div class="map_list">
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/3390/0'" to="/exam/3390/0" target="_blank">全国</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2340/0'" to="/exam/2340/0" target="_blank">山西省</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2341/0'" to="/exam/2341/0" target="_blank">太原市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2366/0'" to="/exam/2366/0" target="_blank">大同市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2429/0'" to="/exam/2429/0" target="_blank">朔州市</router-link>
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2436/0'" to="/exam/2436/0" target="_blank">忻州市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2415/0'" to="/exam/2415/0" target="_blank">吕梁市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2385/0'" to="/exam/2385/0" target="_blank">晋中市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2352/0'" to="/exam/2352/0" target="_blank">长治市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2451/0'" to="/exam/2451/0" target="_blank">阳泉市</router-link>
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2397/0'" to="/exam/2397/0" target="_blank">临汾市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2378/0'" to="/exam/2378/0" target="_blank">晋城市</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/exam/2457/0'" to="/exam/2457/0" target="_blank">运城市</router-link>
            </div>
          </div>
          <div class="maps">
            <label for="">资料</label>
            <div class="map_list">
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/shore'" to="/shore" target="_blank">备考打卡</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/testData/0'" to="/testData/0" target="_blank">备考资料</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/freeLesson/' + id + '/' + play" :to="'/freeLesson/' + id + '/' + play" target="_blank">免费课程</router-link>
            </div>
          </div>
          <div class="foot_map_list">
            <label for="">关于</label>
            <div class="map_list">
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/give'" to="/give" target="_blank">招商加盟</router-link>|
              <router-link tag="a" :href="'https://www.ansjy.cn' + '/about'" to="/about" target="_blank">关于我们</router-link>
            </div>
          </div>
        </div>
        <div class="foot_right">
          <div class="top1">
            <router-link :href="'https://www.ansjy.cn' + '/getPull'" to="/getPull"><img src="../../assets/img/getjy.png" alt="岸上教育"></router-link>
            <li>
              <p>0351 7020090</p>
              <p>400-115-1160</p>
            </li>
          </div>
          <div class="top2">山西省太原市小店区南中环高新区数码港</div>
          <div class="top3">
            <a href="https://ditu.amap.com/search?query=%E5%B2%B8%E4%B8%8A%E6%95%99%E8%82%B2&city=140100&geoobj=112.357845%7C37.758008%7C112.850514%7C37.961302&zoom=12" target="_blank" rel="noopener noreferrer"><img src="../../assets/img/map2.png" alt="岸上教育"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="foots">
      <div class="foot_bottom">
        <li>Copyright 2008-2019 山西绥思未来教育科技有限公司&nbsp;&nbsp;晋ICP备案 11001586号-41</li>
        <div style="width:300px;margin-left: 10px;display: flex;align-items: center;">
          <img src="../../assets/img/gong.png" alt="">
          <a target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=14019202000090"
            style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <img src="" style="float:left;"/>
            <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:rgba(255,255,255,0.25);">晋公网安备 14019202000090号</p></a>
        </div>
        <!-- <li>电话 400-115-1160</li> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      height: '116px',
      videoList: [],
      id: 0,
      play: 0
    }
  },

  created () {
  },

  mounted () {
    this.getVideo()
  },

  components: {
  },

  computed: {},

  methods: {
    // 免费视频
    getVideo () {
      var tokens = localStorage.getItem('token')
      this.$http.post('/link/getVideolists', {
        // eslint-disable-next-line
        token: tokens ? tokens : '',
        page: this.page,
        page_count: this.page_count
      }).then((res) => {
        this.videoList = res.data.data
        this.id = this.videoList[0].id
        this.play = this.videoList[0].is_limit_play
      })
    },
  }
}

</script>
<style lang='scss' scoped>
.footer{
  min-width: 1200px;
  height: 349px;
  background:rgba(16, 46, 74, 1);
}
.foot{
  width: 1200px;
  height: 308px;
  margin: 0 auto;
  color: #222222;
}
.foot_top{
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding-top: 40px;
  height: 308px;
}
.foot_left{
  width: 217px;
  margin-right: 79px;
}
.foot_center{
  width: 590px;
  margin-right: 97px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-size:12px;
}
.foot_left .logoBottom{
  width: 217px;
  height:63px;
  font-weight:bold;
  line-height:63px;
}
// ---------------------
.foot_map{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.foot_map label{
  width: 47px;
  line-height: 16px;
  display: flex;
}
.foot_map .map_list{
  width: 540px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.6)
}
.foot_map .map_list a{
  padding: 0px 30px;
  margin-bottom: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
// -----------------
.maps{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 20px;
}
.maps label{
  width: 47px;
  line-height: 16px;
  display: flex;
}
.maps .map_list{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.6)
}
.maps .map_list a{
  padding: 0px 30px;
  margin-bottom: 20px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
// -------------------------
.foot_map_list{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 20px;
}
.foot_map_list label{
  width: 47px;
  line-height: 16px;
  display: flex;
}
.foot_map_list .map_list{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.6)
}
.foot_map_list .map_list a{
  padding: 0px 30px;
  margin-bottom: 20px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
// -------------------------
.foot_top div.foot_tip{
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-top: 29px;
  color: #ffffff;
  // align-items: center;
}
.foot_top div.foot_tip li{
  margin-left: 40px;
}
.foot_top div.foot_tip li:first-child{
  margin-left: 0px;
}
.foot_top div.foot_tip li p:first-child{
  margin-bottom: 12px;
  font-size: 12px;
  text-align: center;
}
.foot_top div.foot_tip li p img{
  width:88px;
  height:88px;
}
.foot_top div.foot_tip{
  flex: 1;
}
.foots{
  width: 100%;
  height: 39px;
  background: #102e4a;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.foot_bottom{
  width: 1200px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: space-between;
  color:rgba(255,255,255,0.25);
  justify-content: center;
}
.foot_right{
  width: 216px;
}
.foot_right .top1{
  color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: space-between;
}
.foot_right .top1 li{
  margin-left: 15px;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  // font-family:'DIN Alternate Bold';
}
.foot_right .top1 li p{
  font-size: 20px;
  font-family:'DIN Alternate Bold';
  margin-bottom: 4px;
}
.foot_right .top2{
  color: #ffffff;
  margin: 12px auto;
  height:16px;
  font-size:12px;
  font-family:MicrosoftYaHei;
  line-height:16px;
}
</style>
